<template style="height: 100%">
  <div id="container">
    <view>
      <view class="area" :tap='handleOpen4'>筛选对象</view>
      <i-modal title="纵向排列的按钮" :visible="visible4" :actions="actions4" :action-mode="vertical"
               bind:click="handleClick4">

      </i-modal>
    </view>
    <div>
      <swiper :autoplay="false"
              :interval="interval"
              :duration="duration"
              :vertical="true"
              :bindchange=changeVertical({$event})
              v-bind:style="{width:client.width+'px', height: client.height+ 'px' }"

      >
        <block :wx:for="imgUrls" wx:key="*this">
          <!--{{item}}-->
          <swiper-item>
            <swiper :indicator-dots="indicatorDots"
                    :indicator-color="indicatorColor"
                    :indicator-active-color="indicatorActiveColor"
                    :autoplay="autoplay"
                    :interval="interval"
                    :duration="duration"
                    :vertical="vertical"
                    :bindchange="changeSubject"
                    v-bind:style="{width:client.width+'px', height: client.height+ 'px' }"
            >
              <block :wx:for="imgUrls" wx:key="*this">
                <swiper-item>
                  <image :src="item" mode='aspectFill' class="slide-image"
                         v-bind:style="{width:'100%', height: '100%'}"/>
                </swiper-item>
              </block>
            </swiper>
          </swiper-item>
        </block>
      </swiper>

      <view class="tools">
        <view class="margin20">
          <i-icon type="like_fill" size="30" class="icon" color="red"/>
          <!--<image :wx:if="subject.like" class="icon right-icon" src='/image/like_red.png' bindtap='like'>喜欢</image>-->
          <!--<image :wx:if="!subject.like" class="icon right-icon" src='/image/like.png' bindtap='like'>喜欢</image>-->
          <!--<view class="text" @bindtap='like'>{{subject.likes}}</view>-->
        </view>
        <view class="margin20">
          <i-icon type="mail" size="30" class="icon" color="#fff"/>
          <!--<image class="icon right-icon" src='/image/talk.png' @bindtap='talk'>评论</image>-->
          <p class="fontcolor">1212</p>

        </view>
        <view class="margin20">
          <i-icon type="share" size="30" class="icon" color="#fff" @bindtap='share'/>
          <!--<image class="icon right-icon" src='/image/share.png' @bindtap='share'>分享</image>-->
        </view>
        <view class="margin20">
          <i-icon type="warning" size="30" class="icon " color="#fff"/>
        </view>
      </view>


      <!--<view class="reload">-->
      <!--<view>-->
      <!--<image class="icon" src='/image/reload.png' @bindtap='reload'></image>-->
      <!--</view>-->
      <!--</view>-->

      <view class="desc">
        <view>
          <p class="desc-text">匹配指数:67</p>
          <p class="desc-text-other">萍水相逢，若能相识便是缘</p>
        </view>
      </view>
      <view class="desc-bottom">
        <div class="common-border">
          <div style="float: left">
            <i-avatar v-if="userInfo.avatarUrl" :src="userInfo.avatarUrl" size="large"></i-avatar>
          </div>
          <div style="float: left;vertical-align: middle">
            <div>
              <p class="nick mt10">练不出八块...</p>
              <p style="float: left"><span>
                <image class="img-icon mt10" src="../static/images/man.png" mode="aspectFill"> </image>  </span>
                <span class="nick-name mt10">22</span>
                <span class="nick-name mt10">白羊座</span></p>
            </div>
            <p class="nick-name mt10 paddingl10">长居：泰州 | 故乡：南通</p>
          </div>
          <div style="float: left">

          </div>
        </div>

      </view>
    </div>
  </div>
</template>
<script>
  import {$Message} from '../../static/iview/base/index'
  console.log(111)
  export default {
    mpType: 'home',
    data() {
      return {
        data: [
          {
            url: [
              'http://img.hb.aicdn.com/5d5bf87241044414e8d62e6f7079cc586ae6b99817d11-JQp5WJ_/fw/480',
              'http://img.hb.aicdn.com/86e62c0182bba3e1f8c06e0b28be8bc9e08ae291eba3-iEY6OU_/fw/480'
            ],
            id: 111111120,
            mate: 67,
            mateTitle: '萍水相逢，若能相识便是缘',
            nickName: '练不出八块腹肌',
            sex: 'man',
            age: 18,
            constellation: '天蝎座',
            tabernacle: '聊城',
            Hometown: '河南',
            isLove: true,
            letter: 99,
            personalInfo: {
              desction: '善于聊天，一起来聊天呀！',
              expect: '可爱。喜欢聊天',
              info: ['174cm', '河北科技大学'],
              tags: ['理想主义', '宅'],
              topic: ['好吃的', '好玩的'],
              sports: ['抱歉，我是死宅'],
              music: ['轻音乐', '流行'],
              nickImg: 'http://img.hb.aicdn.com/ad42bc7d7c32ecbfb510ae741634e3c9735159f710fe6-FJhTxJ_/fw/480'
            }
          },
          {
            url: [
              'http://img.hb.aicdn.com/f39fedf7bd25f6c44afd28140670b80fe464e7af6aff32-DuZmQj_/fw/480',
              'http://img.hb.aicdn.com/074b0d82d63cd00c5b19f22b8f340c0adbdd886a7f5e6-hb2dbk_/fw/480'
            ],
            url1: [
              'http://img.hb.aicdn.com/5d5bf87241044414e8d62e6f7079cc586ae6b99817d11-JQp5WJ_/fw/480',
              'http://img.hb.aicdn.com/074b0d82d63cd00c5b19f22b8f340c0adbdd886a7f5e6-hb2dbk_/fw/480'
            ],

            id: 111111120,
            mate: 80,
            mateTitle: '萍水相逢，若能相识便是缘11',
            nickName: '练不出八块腹肌11',
            sex: 'man',
            age: 18,
            constellation: '天蝎座',
            tabernacle: '聊城',
            Hometown: '河南',
            isLove: true,
            letter: 199,
            personalInfo: {
              desction: '善于聊天，一起来聊天呀！',
              expect: '可爱。喜欢聊天',
              info: ['174cm', '河北科技大学'],
              tags: ['理想主义', '宅'],
              topic: ['好吃的', '好玩的'],
              sports: ['抱歉，我是死宅'],
              music: ['轻音乐', '流行'],
              nickImg: 'http://img.hb.aicdn.com/ad42bc7d7c32ecbfb510ae741634e3c9735159f710fe6-FJhTxJ_/fw/480'
            }
          }
        ],
        uuuu: [],
        userInfo: {},
        visible4: false,
        actions4: [
          {
            name: '按钮1'
          },
          {
            name: '按钮2',
            color: '#ff9900'
          },
          {
            name: '按钮3',
            icon: 'search'
          }
        ],
        imgUrls: [
          'http://img.hb.aicdn.com/f39fedf7bd25f6c44afd28140670b80fe464e7af6aff32-DuZmQj_/fw/480',
          'http://img.hb.aicdn.com/074b0d82d63cd00c5b19f22b8f340c0adbdd886a7f5e6-hb2dbk_/fw/480'
        ],
        height: '700',
        indicatorDots: true,
        vertical: false,
        autoplay: true,
        interval: 5000,
        duration: 1000,
        indicatorColor: '#999',
        indicatorActiveColor: '#fff',
        client: {
          width: 0,
          height: 0
        }
      }
    },

    components: {},
    computed: {},
    mounted() {
      let self = this;
//      wx.getStorage({
//        key: 'currentPage',
//        success(res) {
//          let mp = {'detail': {'key': res.data}}
//          self.handleChange({mp})
//        }
//      })
      wx.getSystemInfo({
        success: function (res) {
          self.client = {width: res.windowWidth, height: res.windowHeight}
        },
      })
      let data = self.data

      for (let i = 0; i < data.length; ++i) {
        let f = data[i].url;
        let urllll = []
        for (let j = 0; j < f.length; j++) {
          urllll.push(f[j])
        }
        self.uuuu = urllll
      }

//      switch (data) {
//          for (let i = 0; i < length; ++i) {
//            const x = Math.floor(Math.random() * length)
//            const y = Math.floor(Math.random() * length)
//            const temp = this.data.objectArray[x]
//            this.data.objectArray[x] = this.data.objectArray[y]
//            this.data.objectArray[y] = temp
//          }
//          this.setData({
//            objectArray: this.data.objectArray
//          })
//      }


    },
    methods: {
      changeSubject(e) {
      },
      changeVertical(e) {
//        this.setData({
//          interval: e.detail.value
//        })

      },
      handleOpen4() {
        console.log(22)
        this.setData({
          visible4: true
        });
      },

      handleClick4() {
        alert(111)
        this.setData({
          visible4: false
        });
      },
      getUserInfo() {
        // 调用登录接口
        wx.login({
          success: () => {
            wx.getUserInfo({
              success: (res) => {
                this.userInfo = res.userInfo
              }
            })
          }
        })
      },
      clickHandle(msg, ev) {
        console.log('clickHandle:', msg, ev)
      }
    },
    created() {
      // 调用应用实例的方法获取全局数据
      this.getUserInfo()
    }
  }
</script>
<style scope>
  .area {
    position: fixed;
    left: 22rpx;
    top: 5%;
    height: 55rpx;
    color: #fff;
    z-index: 9999;
    border: 2rpx solid #fff;
    padding: 0 30rpx;
    border-radius: 30rpx;
    line-height: 55rpx;
    color: #fff;
    font-size: 26rpx;

  }

  .paddingl10 {
    padding-left: 10rpx;
  }

  .img-icon {
    width: 40rpx;
    height: 40rpx;
    line-height: 40rpx;
    vertical-align: middle;
  }

  .nick-name {
    font-size: 28rpx;
    color: #000;
  }

  .mt10 {
    margin: 0 10rpx;
  }

  .nick {
    float: left;
    color: #f993a6;
    font-weight: bold;
    font-size: 34rpx;
    padding-left: 10rpx;
  }

  .wx-swiper-dots {
    position: relative;
    bottom: 200rpx !important;
  }

  page {
    height: 100%;
    overflow: hidden;
  }

  .swiper {
    height: 100%;
  }

  .common-border {
    border-radius: 20rpx 20rpx 0 0;
    border: 4rpx solid #f993a6;
    margin: 20rpx 20rpx 0rpx 20rpx;
    background-color: #fff;
    overflow: hidden;
    border-bottom: 0 none;
    padding: 20rpx 0 20rpx 20rpx;
    height: 180rpx;

  }

  .slide-image {
    width: 100%;
    height: 100%;
  }

  .reload {
    position: absolute;
    left: 5rpx;
    top: 10rpx;
    height: 100px;
  }

  .tools {
    display: flex;
    position: absolute;
    right: 20rpx;
    top: 250rpx;
    height: 300px;
    flex-direction: column;
    width: 100rpx;
  }

  .userinfo-avatar {
    width: 100rpx;
    height: 100rpx;

    border-radius: 50%;
  }

  .margin20 {
    margin-bottom: 30rpx;
    text-align: center;

  }

  .icon {
    width: 100rpx;
    height: 100rpx;

  }

  .fontcolor {
    color: #fff;
    text-align: center;
    margin-top: 5rpx;
    font-size: 26rpx;
  }

  .text {
    color: white;
    width: 100rpx;
    text-align: center;
    margin: 0rpx 20rpx;
  }

  .desc {
    position: absolute;
    left: 20rpx;
    bottom: 256rpx;
    width: 600rpx;

  }

  .desc-bottom {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    bottom: 0;
    width: 90%;
    background: #fff;
    border-radius: 20rpx 20rpx 0 0;
    height: 180rpx;
  }

  .desc-text {
    color: white;
    font-size: 34rpx;
    font-weight: 600;
    white-space: pre-line;
    position: relative;
  }

  .desc-text-other {
    font-size: 30rpx;
    color: white;
  }

  .footer {
    position: absolute;
    bottom: 10rpx;
    width: 100%;
  }

  .apply {
    position: relative;
    margin: 0 auto;
    width: 100rpx;
    color: #ff2c37;
  }

  /* 框架  */

  .talks-layer {
    position: absolute;
    bottom: -100%;
    height: 0;
    width: 100%;
    overflow: hidden;
    /* background-color: blue; */
  }

  .layer-white-space {
    height: 100%;
    width: 100%;
    /* background-color: green; */
  }

  .talks {
    position: absolute;
    height: 900rpx;
    width: 100%;
    bottom: 0rpx;
    background-color: #2f2d2e;
    border-top-left-radius: 5%;
    border-top-right-radius: 5%;
    /* background-color: red; */
  }

  .talk-header {
    width: 100%;
    height: 70rpx;
    padding-top: 30rpx;
    text-align: center;
  }

  .talk-body {
    height: 700rpx;
  }

  .talk-footer {
    position: absolute;
    bottom: 0rpx;
    width: 100%;
    height: 100rpx;
    background-color: #151515;
  }

  /* 顶部元素  */

  .talk-count {
    font-size: 0.8rem;
    height: 40rpx;
    color: #6b696a;
  }

  .talk-close {
    position: absolute;
    top: 40rpx;
    right: 40rpx;
    width: 40rpx;
    height: 40rpx;
  }

  /* 中部元素  */

  .talk-item {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    width: 100%;
    color: white;
  }

  .talk-item-left {
    display: flex;
    flex-direction: row;
    margin: 20rpx 30rpx;
  }

  .talk-item-face {
    width: 80rpx;
    height: 80rpx;
    border-radius: 50%;
  }

  .talk-item-right {
    width: 100%;
    border-bottom: solid 1rpx #6a6869;
    margin-right: 30rpx;
    margin-bottom: 30rpx;
  }

  .talk-item-nickname {
    font-size: 0.7rem;
    color: #aaa8a9;
    margin-top: 20rpx;
    margin-bottom: 10rpx;
  }

  .talk-item-content {
    display: block;
    margin-right: 30rpx;
    width: 100%;
    white-space: pre-line;
  }

  .talk-item-time {
    font-size: 0.7rem;
    color: #6a6869;
    margin-bottom: 20rpx;
  }

  /* 底部元素  */

  .talk-input {
    width: 100%;
    padding: 20rpx 40rpx;
    color: white;
    border-top-left-radius: 5%;
    border-top-right-radius: 5%;
  }

</style>
